<template>
    <div class="app-container">
        <!-- 卡片-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>日志评审</span>
            </div>

            <!-- 查询条件-->
            <el-form :inline="true" :model="selectParam" label-width="80px" label-position="right" class="demo-form-inline" size="small" >

                <el-form-item label="工作日期:">
                    <el-date-picker type="date"
                                    placeholder="开始"
                                    v-model="selectParam.beginDate"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    style="width: 140px;">
                    </el-date-picker>
                    -
                    <el-date-picker type="date"
                                    placeholder="结束"
                                    v-model="selectParam.endDate"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    style="width: 140px;">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="项 目:">
                    <el-select v-model="selectParam.proNo" placeholder="请选择项目" style="width: 250px" filterable>
                        <el-option label="全部" :value="null"></el-option>
                        <el-option
                                v-for="(item,index) in projects"
                                :label="item.proName"
                                style="width: 250px"
                                :title="item.proName"
                                :value="item.proNo"
                                :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="评审状态:">
                    <el-select v-model="selectParam.reviewStatus" placeholder="请选择评审状态" style="width: 250px">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option label="已评审" value="1"></el-option>
                        <el-option label="未评审" value="0"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item style="float: right">
                    <el-button
                            type="primary"
                            @click="selectButton()">查询
                    </el-button>
                    <el-button
                            type="primary"
                            v-if="userButtonIds.indexOf('log.logReview.reviews') != -1"
                            @click="batchReview()">一键评审
                    </el-button>
                </el-form-item>

            </el-form>

            <el-table
                    :data="logReviews"
                    border
                    size="small"
                    @selection-change="handleSelectionChange"
                    :header-cell-style="tableHeaderStyle"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        :selectable="selectionUseful"
                        header-align="center"
                        align="center"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="userName"
                        label="成员"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="所属部门"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="submitTime"
                        label="提交时间"
                        header-align="center"
                        align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="proName"
                        label="参与项目"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        min-width="200">
                </el-table-column>
                <el-table-column
                        prop="projectStatus"
                        label="项目状态"
                        header-align="center"
                        align="center"
                        width="150">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.projectStatus == 1" size="small">未发布</el-tag>
                            <el-tag v-show="scope.row.projectStatus == 2" size="small">审批中</el-tag>
                            <el-tag v-show="scope.row.projectStatus == 3" size="small">进行中</el-tag>
                            <el-tag v-show="scope.row.projectStatus == 4" size="small">已完成</el-tag>
                            <el-tag v-show="scope.row.projectStatus == 5" size="small">已拒绝</el-tag>
                            <el-tag v-show="scope.row.projectStatus == 6" size="small">未启动</el-tag>
                        </template>
                </el-table-column>
                <el-table-column
                        prop="devPoint"
                        label="开发节点"
                        header-align="center"
                        align="center"
                        :show-overflow-tooltip="true"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="workDate"
                        label="工作日期"
                        header-align="center"
                        align="center"
                        width="150">
                        <template slot-scope="scope">
                            {{dateFormat(scope.row.workDate)}}
                        </template>
                </el-table-column>
                <el-table-column
                        prop="putinDaily"
                        label="投入人天"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="performanceDaily"
                        label="绩效人天"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="考勤时间"
                        header-align="center"
                        width="150">
                     <!-- 上班打卡结果(Normal：正常;Early：早退;Late：迟到;SeriousLate：严重迟到;Absenteeism：旷工迟到;NotSigned：未打卡) -->
                    <template slot-scope="scope">
                        <div style="text-align: left" >
                            <div v-if="scope.row.onDutyTimeResult === 'Normal'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'Early'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'Late'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'SeriousLate'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'Absenteeism'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    旷工
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'NotSigned'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    {{ scope.row.onDutyTime ? getTimeFormat(scope.row.onDutyTime) : '未打卡'}}
                                </div>
                            </div>
                            <div v-else style="visibility:hidden">
                                {{ 'null' }}
                            </div>

                            <div v-if="scope.row.offDutyTimeResult === 'Normal'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'Early'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'Late'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'SeriousLate'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'Absenteeism'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    旷工
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'NotSigned'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    {{ scope.row.onDutyTime ? getTimeFormat(scope.row.onDutyTime) : '未打卡'}}
                                </div>
                            </div>
                            <div v-else style="visibility:hidden">
                                {{ 'null' }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="reason"
                        label="假勤备注"
                        header-align="center"
                        min-width="260">
                    <template slot-scope="scope">
                        <div v-if="scope.row.reason">{{scope.row.reason}}</div>
                        <div v-if="scope.row.attendanceRemark">{{scope.row.attendanceRemark}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="reviewStatus"
                        label="评审状态"
                        header-align="center"
                        align="center"
                        width="120">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.reviewStatus == 0" size="small" type="danger">未评审</el-tag>
                            <el-tag v-show="scope.row.reviewStatus == 1" size="small" >已评审</el-tag>
                        </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        header-align="center"
                        align="center"
                        v-if="userButtonIds.indexOf('log.logReview.review') != -1"
                        width="100">
                    <template slot-scope="scope">
                        <el-button
                                @click="reviewButton_openDrawer(scope.row)"
                                v-if="userButtonIds.indexOf('log.logReview.review') != -1"
                                :type="scope.row.reviewStatus == 1 ? 'info': 'primary' "
                                size="small">评审
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页-->
            <div style="text-align:right;margin: 15px;margin-right: 0px">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="page.pageSize"
                        :current-page="page.pageNum"
                        @current-change="changePageCurrent"
                        :total="page.pageCount">
                </el-pagination>
            </div>

            <el-drawer
                    title="日志评审"
                    :visible.sync="drawer"
                    @close="closeDrawer"
                    :direction="direction">

                <div class="app-container drawer-div">
                    <el-form ref="logReviewForm" :disabled="logReview.reviewStatus == 1" :model="logReview" :key="key" size="small" label-position="left" label-width="80px">
                        <el-form-item label="工作日期">
                            <el-date-picker
                                    v-model="logReview.workDate"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    style="width: 220px"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="投入人天">
                            <el-select v-model="logReview.putinDaily" placeholder="请选择投入人天" style="width: 220px">
                                <el-option label="0.25" value="0.25"></el-option>
                                <el-option label="0.5" value="0.5"></el-option>
                                <el-option label="0.75" value="0.75"></el-option>
                                <el-option label="1.0" value="1.0"></el-option>
                                <el-option label="1.25" value="1.25"></el-option>
                                <el-option label="1.5" value="1.5"></el-option>
                                <el-option label="1.75" value="1.75"></el-option>
                                <el-option label="2.0" value="2.0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属部门">
                            <el-select v-model="logReview.deptId" placeholder="请选择所属部门" style="width: 220px" @change="changeDept(1)" >
                                <el-option v-for="(item,index) in depts" :label="item.deptName" :value="Number(item.deptId)" :key="index" style="width: 200px"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目">
                            <el-select v-model="logReview.proNo" placeholder="请选择项目" style="width: 220px" filterable>
                                <el-option v-for="(item,index) in projects" :label="item.proName" :value="item.proNo" :key="index" style="width: 200px"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="开发节点"
                                prop="devPoint"
                                :rules="[{ required: true, message: '请选输入开发节点', trigger: 'blur' }]">
                            <el-input  v-model.trim="logReview.devPoint" style="width: 220px" maxLength="50"></el-input>
                        </el-form-item>
                        <el-form-item label="绩效人天">
                            <el-select v-model="logReview.performanceDaily" placeholder="请选择绩效人天" style="width: 220px">
                                <el-option label="0.25" value="0.25"></el-option>
                                <el-option label="0.5" value="0.5"></el-option>
                                <el-option label="0.75" value="0.75"></el-option>
                                <el-option label="1.0" value="1.0"></el-option>
                                <el-option label="1.25" value="1.25"></el-option>
                                <el-option label="1.5" value="1.5"></el-option>
                                <el-option label="1.75" value="1.75"></el-option>
                                <el-option label="2.0" value="2.0"></el-option>
                            </el-select>
                        </el-form-item>

                        <div style="width: 100%;height: 40px;background-color: lightgrey;text-align: center;margin-bottom: 20px">
                            <b   style="line-height: 40px;color: white;">工作内容</b>
                        </div>

                        <el-form-item label="今日工作">
                            <el-input type="textarea" v-model.trim="logReview.dailyLog" maxLength="500"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model.trim="logReview.remark" maxLength="500"></el-input>
                        </el-form-item>
                        <el-form-item label="明日计划">
                            <el-input type="textarea" v-model.trim="logReview.tomorrowPlan" maxLength="500"></el-input>
                        </el-form-item>


                    </el-form>
                </div>
                <div class="demo-drawer__footer">
                    <el-button :type="logReview.reviewStatus == 1 ?'info': 'primary'" :disabled="logReview.reviewStatus == 1" @click="logReviewSubmit('logReviewForm')">提交</el-button>
                    <el-button @click="drawer=false">取消</el-button>
                </div>
            </el-drawer>


        </el-card>
    </div>

</template>

<script>
    const statusEnum = {
      Normal:'正常',
      Early: '早退',
      Late: '迟到',
      SeriousLate: '严重迟到',
      Absenteeism: '旷工',
      NotSigned: '未打卡'

    }
    import {Message} from 'element-ui'
    import {tableHeaderStyle,} from '@/utils/constant'
    import {http_logReview_list,
            http_inprocessingPro_list,
            http_inprocessingPro_review,
            http_inprocessingPro_review_batch}  from '@/api/logReview'
    import {http_dropdownBox_depts} from "@/api/user";
    import moment from 'moment'

    export default {
        data() {
            return {
                statusEnum,
                tableHeaderStyle:tableHeaderStyle,
                userButtonIds:JSON.parse(localStorage.getItem("user")).buttonIds,
                drawer: false,
                direction: 'rtl',
                logReviews: [],
                projects: [],
                depts: [],

                multipleSelection: [],
                paramLogIds: [],
                page: {
                    pageNum: null,
                    pageSize: null,
                    pageCount: null,
                },

                selectParam: {
                    beginDate: this.getNowTime(3),
                    endDate: this.getNowTime(0),
                    proNo: null,
                    reviewStatus: null,
                    mangerId: null,
                    oldBeginDate: this.getNowTime(3),
                    oldEndDate: this.getNowTime(0),
                },
                selectParamVersion: 0,
                key: new Date().getTime(),

                logReview: {
                    logId: null,
                    workDate: null,
                    putinDaily: null,
                    deptId: null,
                    deptName: null,
                    proNo: null,
                    devPoint: null,
                    performanceDaily: null,
                    dailyLog: null,
                    remark: null,
                    tomorrowPlan: null,
                    reviewStatus: null
                },

            }
        },
        methods: {
            http_list(){
                if (this.selectParamVersion > 0){
                    this.page.pageNum = 1
                }
                http_logReview_list(this.page,this.selectParam).then(result=>{
                    const {data} = result
                    this.logReviews = data.records
                    this.page.pageCount = data.total
                    this.page.pageNum = data.current
                    this.page.pageSize = data.size
                    this.selectParamVersion = 0
                })
            },
            http_pro_list(){
                http_inprocessingPro_list().then(result=>{
                    const { data} = result
                    console.log(result)
                    this.projects = data
                })
            },
            http_log_review(){
                // console.log('logReview:',this.logReview)
                http_inprocessingPro_review(this.logReview).then(result=>{
                    const { message, stateCode} = result
                    // console.log(result)
                    if (stateCode == '0000'){
                        this.http_list()
                        Message.success(message)
                    }else {
                        Message.error(message)
                    }
                })
            },
            http_batch_review(){
                http_inprocessingPro_review_batch(this.paramLogIds).then(result=>{
                    const { message, stateCode} = result
                    // console.log(result)
                    if (stateCode == '0000'){
                        this.http_list()
                        Message.success(message)
                    }else {
                        Message.error(message)
                    }
                })
            },
            http_depts(){
                http_dropdownBox_depts().then(result=>{
                    const {data} = result
                    this.depts = data
                })
            },
            changePageCurrent(value){
                this.page.pageNum = value
                this.http_list()
            },

            reviewButton_openDrawer(param) {
                this.logReview = JSON.parse(JSON.stringify(param))
                this.key = new Date().getTime()
                this.drawer = true
            },
            selectButton(){
                this.http_list()
            },
            logReviewSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.http_log_review();
                        this.drawer=false
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleSelectionChange(val) {
                this.paramLogIds = []
                val.forEach(v=>{
                    this.paramLogIds.push(v.logId)
                })
            },
            batchReview(){
                if (this.paramLogIds.length == 0){
                    Message.warning("请选择需要评审的日志")
                }else {
                    this.http_batch_review()
                }
            },
            getNowTime(num) {
                var now = new Date();
                now.setTime(now.getTime() - num*24*60*60*1000)
                var year = now.getFullYear(); //得到年份
                var month = now.getMonth(); //得到月份
                var date = now.getDate(); //得到日期
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}-${month}-${date}`;
                return defaultDate;
            },
            dateFormat(dateData) {
                let date = new Date(dateData)
                let y = date.getFullYear()
                let m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                let d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },
            getTimeFormat(date){
            //    console.log('date',date)
              return date && moment(date).format('HH:mm') || '未打卡'
                // let date1 = new Date(date)
                // let h = date1.getHours()
                //
                // let m = date1.getMinutes()
                // console.log(date1,h , m)
                // const time = h+ ':' + m
                // return time
            },
            selectionUseful(row, index){
                if (row.reviewStatus == 1){
                    return false
                }else {
                    return true
                }
            },
            getRouterParams(){
                const {proNo,workDate} = this.$route.params
                if (proNo != null && workDate != null){
                    this.selectParam={
                        proNo: proNo,
                        beginDate: workDate,
                        endDate: workDate,
                    }
                }
            },
            changeDept(v){
                this.depts.forEach(item=>{
                    if (item.deptId == this.logReview.deptId ){
                        this.logReview.deptName = item.deptName
                    }
                })
            },
            closeDrawer(val){
                // 获取列表数据
                // this.http_list()
            }
        },
        created() {
            // 判断路由是否有参数
            this.getRouterParams()
            // 获取列表数据
            this.http_list()
            // 获取项目下拉框的数据
            this.http_pro_list()
            //获取部门数据
            this.http_depts()


        },
        watch: {
            selectParam: {
                handler(selectParam,oldSelectParam){
                    this.selectParamVersion = 1
                    // if (selectParam.beginDate && selectParam.endDate && new Date(selectParam.beginDate).getTime() > new Date(selectParam.endDate).getTime()){
                    //     Message.warning("工作日期：开始不能大于结束")
                    // }

                    if (selectParam.beginDate && selectParam.endDate) {
                        let x= 0
                        if (selectParam.beginDate != selectParam.oldBeginDate) x = 1
                        if (selectParam.endDate != selectParam.oldEndDate ) x = 2
                        if ( x > 0 && new Date(selectParam.beginDate).getTime() > new Date(selectParam.endDate).getTime()) {
                            Message.warning("工作日期：开始不能大于结束")
                            if (x == 1) selectParam.beginDate = null
                            if (x == 2) selectParam.endDate = null
                        }
                    }
                    selectParam.oldBeginDate = selectParam.beginDate
                    selectParam.oldEndDate = selectParam.endDate

                },
                deep:true
            },
        }

    }
</script>


<style lang="less" scoped>
    .warpper_item{
      display: flex;
      flex-direction: column;
      .start, .end{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 50%;
        transform: translateX(-50%);
        .circle1{
          background: rgba(0,0,0,0.25);
          margin-right: 6px;
        }
      }
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .el-table th.gutter {
        display: table-cell !important
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .circle1 {
        border-radius: 50%;
        display: inline-block;
        margin-right: 1px;
        width: 10px;
        height: 10px;
        background: #6DD400;
        /* 宽度和高度需要相等 */
    }
    .circle2 {
        border-radius: 50%;
        display: inline-block;
        margin-right: 1px;
        width: 10px;
        height: 10px;
        background: mediumturquoise;
        /* 宽度和高度需要相等 */
    }

    .wtd {
        width: 28%;
    }
    .el-drawer__header span:focus {
        outline: 0!important;
    }
    .demo-drawer__footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background-color: white;
        text-align: center;
    }

    .drawer-div{
        height: 83vh;
        overflow-y: auto
    }
    /deep/.el-drawer__header span:focus {
        outline: 0;
    }

</style>
